<template>
    <div class="page">
        <div class="item">
            <el-button @click="methods.getEnv()" type="primary">读取环境变量</el-button>
        </div>
        <div>
            <el-button @click="methods.uiExampleHandler()" type="primary">UI示例</el-button>
        </div>
    </div>
</template>

<script setup>
import { captchaImage } from '~/api/index.js'
import { getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance()

// 只在服务端发起请求
onServerPrefetch(async () => {
    captchaImage().then((req) => {
        console.log('服务返回数据', req.success)
    })
})

const methods = {
    getEnv() {
        proxy.$router.push({
            path: '/env',
        })
    },
    uiExampleHandler() {
        proxy.$router.push({
            path: '/uiExample',
        })
    },
}


</script>
<style scoped lang="scss">
.page {
    text-align: center;
    padding: 20px;
}

.item {
    padding: 10px 0;
}
</style>
